<script setup lang="ts" name="VueBigScreenWorkstation">
import Menubar from './components/Menubar/index.vue'
import { useLayoutStore } from '@/store/bigScreen/layoutStore'
import CustomDragLayer from './components/CustomDragLayer/index.vue'
import CkRoot from './components/StaticDrop/CkRoot/index.vue'
import CkWrapper from './components/StaticDrop/CkWrapper/index.vue'
import CkWrap from './components/StaticDrop/CkWrap/index.vue'
import CkMain from './components/StaticDrop/CkMain/index.vue'
import CkContent from './components/StaticDrop/CkContent/index.vue'
import CkMaster from './components/StaticDrop/CkMaster/index.vue'
import CkDesigner from './components/CkDesigner/index.vue'

const layoutStore = useLayoutStore()
const { initLayout } = layoutStore
onMounted(() => {
  initLayout()
})

const disableRightClick = (event) => {
  event.preventDefault()
}
</script>

<template>
  <div class="large-screen-workstation" @contextmenu="disableRightClick">
    <Menubar></Menubar>
    <div class="content-page">
      <CkRoot>
        <CkWrapper>
          <CkWrap>
            <CkMain>
              <CkContent>
                <CkMaster>
                  <CkDesigner></CkDesigner>
                </CkMaster>
              </CkContent>
            </CkMain>
          </CkWrap>
        </CkWrapper>
      </CkRoot>
      <CustomDragLayer></CustomDragLayer>
    </div>
  </div>
</template>

<style scoped lang="scss">
.large-screen-workstation {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--el-header-bg-color);

  .content-page {
    display: flex;
    flex: 1;
  }

  * {
    -webkit-touch-callout: none;
    user-select: none;

  }

  input {
    user-select: auto;

  }

  textarea {
    user-select: auto;

  }
}

.drag-and-drop {
  width: 100px;
  height: 100px;
  border: 1px solid var(--el-border-color);

  .mover {
    width: 20px;
    height: 20px;
    margin: 5px;
    background-color: var(--el-color-primary);
    cursor: move;
  }
}
</style>
